<style>
    .profile-avatar-container {
        position:relative;
        width:100px;
    }
    .profile-avatar-container .profile-user-img{
        width:100px;
        height:100px;
    }
    .profile-avatar-container .profile-avatar-text {
        display:none;
    }
    .profile-avatar-container:hover .profile-avatar-text {
        display:block;
        position:absolute;
        height:100px;
        width:100px;
        background:#444;
        opacity: .6;
        color: #fff;
        top:0;
        left:0;
        line-height: 100px;
        text-align: center;
    }
    .profile-avatar-container button{
        position:absolute;
        top:0;left:0;width:100px;height:100px;opacity: 0;
    }
</style>

<div class="container">
    <div class="top">
        <h1 class="page__title" style="background-color:#479de6">帳號<span id="PageBack" class="back">返回</span><a class="home fa fa-home ajax-page" id="home" href=".html"></a></h1>
    </div>
    <div class="page" id="page" style="background-color:#ffffff;margin-bottom:20px;">
        <div class="pagebg"></div>
        <div class="pagemain">
            <div class="">
                <p style="text-align: center;"><strong><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 20px;">帳號</span></strong></p>
            </div>

            <div class="row">
                <div class="col-md-3">
                    {include file="common/sidenav" /}
                </div>
                <div class="col-md-9">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <h2 class="page-header">{:__('Profile')}</h2>
                            <form id="profile-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="{:url('api/user/profile')}">
                                {:token()}
                                <input type="hidden" name="avatar" id="c-avatar" value="{:$user->getData('avatar')}" />
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-2"></label>
                                    <div class="col-xs-12 col-sm-4">
                                        <div class="profile-avatar-container">
                                            <img class="profile-user-img img-responsive img-circle plupload" src="{$user.avatar|cdnurl}" alt="">
                                            <div class="profile-avatar-text img-circle">{:__('Click to edit')}</div>
                                            <button id="plupload-avatar" class="plupload" data-mimetype="png,jpg,jpeg,gif" data-input-id="c-avatar"><i class="fa fa-upload"></i> {:__('Upload')}</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-2">{:__('Username')}:</label>
                                    <div class="col-xs-12 col-sm-4">
                                        <input type="text" readonly class="form-control" id="username" name="username" value="{$user.username}" data-rule="required;username;remote({:url('api/validate/check_username_available')}, id={$user.id})" placeholder="">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-2">{:__('Nickname')}:</label>
                                    <div class="col-xs-12 col-sm-4">
                                        <input type="text" readonly class="form-control" id="nickname" name="nickname" value="{$user.nickname}" data-rule="required" placeholder="">
                                    </div>
                                </div>

                                {if !$isanchanguser}
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-2">管辖区域:</label>
                                    <div class="col-xs-12 col-sm-4">
                                        <textarea readonly class="form-control editor" rows="3"  cols="100">{$quyu}</textarea>
                                    </div>
                                </div>
                                {/if}

                                <div class="form-group normal-footer">
                                    <label class="control-label col-xs-12 col-sm-2"></label>
                                    <div class="col-xs-12 col-sm-8">
                                        <button type="submit" class="btn btn-success btn-embossed disabled">{:__('Ok')}</button>
                                        <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="weui-tabbar .tabbar970785" id="tabbar970785" style="width: 100%;">
                <a href="{:url('home/index')}" page="index" class="weui-tabbar__item "> <img src="__CDN__/assets/images/icon1c.png" img="__CDN__/assets/images/icon1c.png" selectimg="__CDN__/assets/images/icon1.png" alt="" class="weui-tabbar__icon" style="" /> <p class="weui-tabbar__label weui-tabbar__label970785">首頁</p> </a>

                <a href="{:url('home/cbzy')}" page="cbzy" class="weui-tabbar__item "> <img src="__CDN__/assets/images/icon2c.png" img="__CDN__/assets/images/icon2c.png" selectimg="__CDN__/assets/images/icon2.png" alt="" class="weui-tabbar__icon" style="" /> <p class="weui-tabbar__label weui-tabbar__label413181">抄表作業</p> </a>
                {if $isanchanguser}
                <a href="{:url('home/anchang').'?anchang_id='.$anchangid}" page="anchang" class="weui-tabbar__item  "> <img src="__CDN__/assets/images/icon_purchase04.png" img="__CDN__/assets/images/icon_purchase04.png" selectimg="__CDN__/assets/images/icon_purchase04_pressed.png" alt="" class="weui-tabbar__icon" style="" /> <p class="weui-tabbar__label weui-tabbar__label281124">案場</p> </a>
                {else}
                <a href="{:url('home/anchanglist')}" page="anchanglist" class="weui-tabbar__item  "> <img src="__CDN__/assets/images/icon_purchase04.png" img="__CDN__/assets/images/icon_purchase04.png" selectimg="__CDN__/assets/images/icon_purchase04_pressed.png" alt="" class="weui-tabbar__icon" style="" /> <p class="weui-tabbar__label weui-tabbar__label281124">案場</p> </a>
                {/if}
                <a href="{:url('user/profile')}" class="weui-tabbar__item   weui-bar__item_on "> <img src="__CDN__/assets/images/icon3.png" img="__CDN__/assets/images/icon3.png" selectimg="__CDN__/assets/images/icon3.png" alt="" class="weui-tabbar__icon" style="" /> <p class="weui-tabbar__label weui-tabbar__label413181">帳號</p> </a>

                <style type="text/css">
                    .tabbar970785 {}

                    .weui-tabbar__label970785 {
                        color: #999999 !important;
                    "

                    }

                    .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label970785 {
                        color: #09bb07 !important;
                    }
                </style>
            </div>



        </div>
        <div class="diygw-com-footer">

        </div>
    </div>
</div>


<script type="text/html" id="emailtpl">
    <form id="email-form" class="form-horizontal form-layer" method="POST" action="{:url('api/user/changeemail')}">
        <div class="form-body">
            <input type="hidden" name="action" value="changeemail" />
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-3">{:__('New Email')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <input type="text" class="form-control" id="email" name="email" value="" data-rule="required;email;remote({:url('api/validate/check_email_available')}, event=changeemail, id={$user.id})" placeholder="{:__('New email')}">
                    <span class="msg-box"></span>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-3">{:__('Captcha')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <div class="input-group">
                        <input type="text" name="captcha" id="email-captcha" class="form-control" data-rule="required;length(4);integer[+];remote({:url('api/validate/check_ems_correct')}, event=changeemail, email:#email)" />
                        <span class="input-group-btn" style="padding:0;border:none;">
                            <a href="javascript:;" class="btn btn-info btn-captcha" data-url="{:url('api/ems/send')}" data-type="email" data-event="changeemail">获取验证码</a>
                        </span>
                    </div>
                    <span class="msg-box"></span>
                </div>
            </div>
        </div>
        <div class="form-footer">
            <div class="form-group" style="margin-bottom:0;">
                <label class="control-label col-xs-12 col-sm-3"></label>
                <div class="col-xs-12 col-sm-8">
                    <button type="submit" class="btn btn-md btn-info">{:__('Submit')}</button>
                </div>
            </div>
        </div>
    </form>
</script>
<script type="text/html" id="mobiletpl">
    <form id="mobile-form" class="form-horizontal form-layer" method="POST" action="{:url('api/user/changemobile')}">
        <div class="form-body">
            <input type="hidden" name="action" value="changemobile" />
            <div class="form-group">
                <label for="c-mobile" class="control-label col-xs-12 col-sm-3">{:__('New mobile')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <input type="text" class="form-control" id="mobile" name="mobile" value="" data-rule="required;mobile;remote({:url('api/validate/check_mobile_available')}, event=changemobile, id={$user.id})" placeholder="{:__('New mobile')}">
                    <span class="msg-box"></span>
                </div>
            </div>
            <div class="form-group">
                <label for="mobile-captcha" class="control-label col-xs-12 col-sm-3">{:__('Captcha')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <div class="input-group">
                        <input type="text" name="captcha" id="mobile-captcha" class="form-control" data-rule="required;length(4);integer[+];remote({:url('api/validate/check_sms_correct')}, event=changemobile, mobile:#mobile)" />
                        <span class="input-group-btn" style="padding:0;border:none;">
                            <a href="javascript:;" class="btn btn-info btn-captcha" data-url="{:url('api/sms/send')}" data-type="mobile" data-event="changemobile">获取验证码</a>
                        </span>
                    </div>
                    <span class="msg-box"></span>
                </div>
            </div>
        </div>
        <div class="form-footer">
            <div class="form-group" style="margin-bottom:0;">
                <label class="control-label col-xs-12 col-sm-3"></label>
                <div class="col-xs-12 col-sm-8">
                    <button type="submit" class="btn btn-md btn-info">{:__('Submit')}</button>
                </div>
            </div>
        </div>
    </form>
</script>
<style>
    .form-layer {height:100%;min-height:150px;min-width:300px;}
    .form-body {
        width:100%;
        overflow:auto;
        top:0;
        position:absolute;
        z-index:10;
        bottom:50px;
        padding:15px;
    }
    .form-layer .form-footer {
        height:50px;
        line-height:50px;
        background-color: #ecf0f1;
        width:100%;
        position:absolute;
        z-index:200;
        bottom:0;
        margin:0;
    }
    .form-footer .form-group{
        margin-left:0;
        margin-right:0;
    }
</style>